<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>武汉理工大学出版社</title>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/rem.js"></script>
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/page_div.css">
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js"></script>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body style="background-color: #fff;">
		<!-- 头部 -->
		<div id="header"></div>
		
		<div id="bootstrap"></div>
		
		<div class="sales_zone" id="app">
			<div class="sales_zone_nav">
				<div class="title">
					<div>
						<p class="p1">党建与文化</p>
						<p class="p2">PARTY BUILDING CULTURE</p>
					</div>
				</div>
				<div class="nav_list">
					<ul>
						<li v-for="(item,index) in PartyBuildClassify" @click="onSalesZone(index,item)" :style="{'background': szCur==index?'#b3161d':''}">
							<div class="nav_list_left">
								<img v-if="szCur==index" class="img1" :src="szCur==index?'static/xzIcon1.png':''">
								<span :style="{'color': szCur==index?'#fff':''}">{{item.name}}</span>
							</div>
							<img class="img2" :src="szCur==index?'static/xzIcon2.png':'static/wxzIcon.png'"/>
						</li>
					</ul>
				</div>
			</div>
			
			<div class="sales_zone_cont">
				<!-- 类目标题 -->
				<div class="sales_zone_cont_title">
					<div class="sales_zone_cont_titles">
						<img src="static/titleIcon.png"/>
						<p>{{szName}}</p>
					</div>
					<img class="sales_zone_cont_title_back" src="static/titleBack.png">
				</div>
				<!-- 企业文化 -->
				<div style="font-size: 0.26rem;font-family: Source Han Sans CN;font-weight: 600;color: #222;line-height: 0.26rem;margin: 0.47rem 0;text-align: center;">{{title}}</div>
				<div class="" v-html="content" v-if="curShow">
				</div>
				
				<!-- 党建专栏 -->
				<div class="news" v-else>
					<div v-if="partyBuildList.length>0">
						<div class="live">
							<ul>
								<li @click="onDetails(partyBuild.content,partyBuild.title)">
									<img v-if="partyBuild.img" :src="imgUrl+partyBuild.img">
									<img v-else src="img/c1.png">
									<div class="content">
										<p class="title">{{partyBuild.title}}</p>
										<p class="summary">{{partyBuild.subTitle}}</p>
										<p class="source_time">
											<span>来源：{{partyBuild.source}}</span>
											<span>时间：{{partyBuild.publishTime}}</span>
										</p>
									</div>
								</li>
							</ul>
						</div>
						<div class="ban_list"  v-for="(item,index) in partyBuildList">
							<div class="ban_list_ul">
								<ul>
									<li @click="onDetails(item.content,item.title)">
										<p class="title">{{item.title}}</p>
										<p class="time">{{item.publishTime}}</p>
									</li>
								</ul>
							</div>
							<!-- <div id="page" class="page_div"></div> -->
						</div>
						<div v-cloak class="app" v-if="total>0&&partyBuildList!=''&&!curShow">
							<div v-show="total >= 1" class="pageContainer">
								<ul class="pagesInner">
<!--									<li class="page" @click="prevOrNext(-1)"><span aria-hidden="true">&lt;</span></li>-->
									<li class="page" v-for="(item, index) in pages" :key="index" :class="{actived: item == pageIndex}" @click="selectPage(item)">
										<span>{{item}}</span>
									</li>
<!--									<li class="page" @click="prevOrNext(1)"><span class="fa fa-chevron-right" aria-hidden="true">&gt;</span></li>-->
								</ul>
								共{{total}}页&nbsp;转到第&nbsp;
								<input type="text" v-model="goToPage" class="totalinput">
								&nbsp;页&nbsp;
								<button @click="handleGoToPage">GO</button>
							</div>
						</div>
					</div>
					<div class="" v-html="content" v-else-if="content!=''">
					</div>
					<div v-else>暂无内容</div>
				</div>
			</div>
			
			<!-- 加载中 -->
			<div class="load_page" v-show="isLoadingShow">
				<div class="content">
					<div class="item">
						<i class="loader --1"></i>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 底部 -->
		<div id="footer"></div>

	</body>
	<script>
		function getQueryVariable(variable)
		{
			const query = window.location.search.substring(1);
			const vars = query.split("&");
			for (var i=0;i<vars.length;i++) {
				var pair = vars[i].split("=");
				if(pair[0] == variable){return pair[1];}
			}
			return(false);
		}
		const App = {
			data() {
				return {
					szCur:0,
					firstCode:'',
					curShow:false,
					szName:'企业文化',
					salesZoneList:[],
					content: '',
					title:'',
					partyBuilding:'',
					partyBuildList:'',
					partyBuild:'',
					partyCode:'',
					PartyBuildClassify:[],
					pageIndex:1,
					pageSize:10,
					goToPage: '',
					total:1,
					firstFlag:false,
					imgUrl:'http://dbs.wutp.com.cn/CM-API',
					isLoadingShow:false
				}
			},
			computed: {
				pages: function () {
					// 每次最多显示5个页码
					var c = this.pageIndex
					var t = this.total
					var p = []
					for (var i = 1; i <= t; i++) {
						p.push(i)
					}
					var l = p.length
					/*if (l <= 5) { // 总页数<=5，显示全部页码
						return p
					} else if (l > 5 && c <= 3) { // 总页数>5 && 当前页面<=3
						return [1, 2, 3, 4, '...', t]
					} else if (l > 5 && c > 3 && c <= l - 2) { // 总页数 > 5 && 当前页面 > 3 && 当前页 < 总页数 - 3
						return [1, '...', c - 2, c - 1, c, '...', t]
					} else { // 总页数 > 5 && 当前页面 > 3 && 当前页 > 总页数 - 3
						return [1, '...', t - 3, t - 2, t - 1, t]
					}*/

					if (l <= 5) { // 总页数<=5，显示全部页码
						return p
					} else if (l > 5 && c <= 4) { // 总页数>5 && 当前页面<=3
						return [1, 2, 3, 4, 5,'...', '尾页']
					} else if (l > 5&& c > 4 && c <= l - 3) { // 总页数 > 5 && 当前页面 > 3 && 当前页 < 总页数 - 3
						return [c - 3, c - 2, c - 1, c, c + 1,  '...', '尾页']
					} else { // 总页数 > 5 && 当前页面 > 3 && 当前页 > 总页数 - 3
						return [ '首页',t - 3, t - 2, t - 1,t ]
					}
				},
			},
			mounted(){
				sessionStorage.setItem('href','http://app.wutp.com.cn/party_building.html?name=QYDJ');
				this.getPartyBuildClassify()
				if(window.location.href.split("&")[1]=='cur=3'){
					this.szCur = 3;
					this.szName = '企业党建';
					this.partyCode = 'QYDJ';
					this.curShow = false;
					this.getPartyBuildByClassifyCode();
					return
				}
				
				if(window.location.href.split("&")[3]){
					this.szName = '企业党建';
					this.title = sessionStorage.getItem('title');
					this.content = sessionStorage.getItem('content');
					this.szCur = 3;
					this.curShow = true;
				}else{
					this.getPartyBuildFirst()
				}
				
			},
			methods:{
				// 获取分类
				async getPartyBuildClassify(){
					let that = this;
					that.isLoadingShow = true
					await axios({
						method:"get",
						url:"http://dbs.wutp.com.cn/CM-API/partyBuildApi/getPartyBuildClassify",
					}).then(function (res) {
						that.PartyBuildClassify = res.data.data;
						that.isLoadingShow = false
					})
				},
				//首次访问
				async getPartyBuildFirst(){
					this.firstFlag = true;
					let that = this;
					const params = {
						pageNum: that.pageIndex,
						pageSize: that.pageSize,
					}
					that.isLoadingShow = true
					await axios({
						method:"get",
						url:"http://dbs.wutp.com.cn/CM-API/partyBuildApi/getPartyBuildFirst",
						params : params,
					}).then(function (res) {
						// for (var i=0;i<res.data.data.content.length;i++) {
							// if(i == 0){
						that.content = res.data.data.content[0].content
						that.title = res.data.data.content[0].title
						console.log(res.data.data.content[0].content)
						that.curShow = true;
						that.isLoadingShow = false
						// 	}
						// }
						// that.partyBuildList=res.data.data.content
						// // 总条数除以10并向上取整得到总页数
						// const total = res.data.data.total / that.pageSize;
						// that.total = Math.ceil(total);
						// that.pageIndex = res.data.data.pageNum
						// that.pageSize = res.data.data.pageSize;
					})
				},
				//通过左侧code,查询右侧列表
				async getPartyBuildByClassifyCode(){
					let that = this;
					that.partyBuild = ''
					const params = {
						pageNum: that.pageIndex,
						pageSize: that.pageSize,
						searchParam : {SEARCH_EQ_classify_code:that.partyCode},
						orderParam:{order_no: false},
					}
					that.isLoadingShow = true
					await axios({
						method:"get",
						url:"http://dbs.wutp.com.cn/CM-API/partyBuildApi/getPartyBuild",
						params : params,
					}).then(function (res) {
						if (res.data.data.content.length>1) {
							for (var i = 0; i < res.data.data.content.length; i++) {
								if (i == 0) {
									that.partyBuild = res.data.data.content[i]
									console.log(res.data.data.content[0])
								}
							}
							that.partyBuildList = res.data.data.content
							that.title = ''
						}else if(res.data.data.content.length==1){
							that.partyBuild = ''
							that.partyBuildList = ''
							that.content = res.data.data.content[0].content
							that.title = res.data.data.content[0].title
						}else{
							that.content = ''
							that.partyBuild = ''
							that.partyBuildList = ''
						}
						that.isLoadingShow = false
						const total = res.data.data.total / that.pageSize;
						that.total = Math.ceil(total);
						that.pageIndex = res.data.data.pageNum
						that.pageSize = res.data.data.pageSize;
					})
				},
				onSalesZone(e,n){
					this.firstFlag = false
					this.szCur = e;
					this.szName = n.name;
					this.curShow = false;
					this.partyCode = n.code
					this.pageIndex = '1'
					this.getPartyBuildByClassifyCode()
				},
				onDetails(content,title){
					this.curShow = true;
					this.content = content;
					this.title= title
				},
				prevOrNext: function(n) {
					this.pageIndex += n
					this.pageIndex <= 1 ? this.pageIndex = 1 : this.pageIndex > this.total ? this.pageIndex = this.total : null
					if(this.firstFlag){
						this.getPartyBuildFirst();
					}else{
						this.getPartyBuildByClassifyCode();
					}
				},
				selectPage: function(n) {
					if(n=='尾页'){
						n = this.total
					}
					if(n=='首页'){
						n = 1
					}
					if (n === this.pageIndex) return
					if (typeof n === 'string') return
					this.pageIndex = n;
					if(this.firstFlag){
						this.getPartyBuildFirst();
					}else{
						this.getPartyBuildByClassifyCode();
					}
				},
				handleGoToPage: function() {
					this.pageIndex = this.goToPage <= 1 ? 1 : this.goToPage - 0 >= this.total - 0 ? this.total :
							this.goToPage
					this.goToPage = this.pageIndex;
					if(this.firstFlag){
						this.getPartyBuildFirst();
					}else{
						this.getPartyBuildByClassifyCode();
					}
				},
			}
		};
		Vue.createApp(App).mount('#app');
		
	</script>

	<style>
		.sales_zone{
			display: flex;
			margin: 0 3rem;
		}
		.sales_zone_nav{
			margin-right: 0.3rem;
		}
		.sales_zone_nav .title{
			width: 2.7rem;
			height: 0.88rem;
			background-image: url("img/back2.png");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			display: flex;
			align-items: center;
			padding-left: 0.3rem;
			margin: 0 0.01rem;
		}
		.sales_zone_nav .title .p1{
			font-size: 0.24rem;
			color: #fff;
			font-weight: 600;
			letter-spacing: 0.01rem;
			margin-bottom: 0.1rem;
		}
		.sales_zone_nav .title .p2{
			font-size: 0.13rem;
			color: #fff;
			font-weight: 600;
			line-height: 0.12rem;
		}
		.nav_list{
		}
		.nav_list ul li{
			height: 0.7rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 0.3rem;
			border: 0.01rem solid #eee;
			border-top: none;
			cursor: pointer;
			
		}
		.nav_list_left{
			display: flex;
			align-items: center;
		}
		.nav_list ul li .img1{
			width: 0.14rem;
			margin-right:0.2rem;
		}
		.nav_list ul li .img2{
			width: 0.07rem;
			margin-left: 0.12rem;
		}
		.nav_list ul li span{
			font-size: 0.17rem;
		}
		
		.sales_zone_cont{
			flex: 1;
			margin-top: 0.2rem;
		}
		.sales_zone_cont_title{
			margin-bottom: 0.2rem;
		}
		.sales_zone_cont_titles{
			display: flex;
			align-items: center;
			margin-bottom: 0.3rem;
		}
		.sales_zone_cont_titles p{
			font-size: 0.30rem;
			font-weight: 600;
		}
		.sales_zone_cont_titles img{
			width: 0.1rem;
			margin-right: 0.1rem;
		}
		.sales_zone_cont_title_back{
			width: 100%;
			height: 0.1rem;
		}
		
		.booklist{
			
		}
		.booklist .ul2 {
			padding: 0 0.09rem;
		}
		
		.booklist .ul2 li {
			height: 0.88rem;
			border-bottom: 0.01rem dashed #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0.36rem 0;
		}
		
		.booklist .ul2 li .b1 {
			display: flex;
			align-items: center;
		}
		
		.booklist .ul2 li .b1 img{
			width: 1rem;
			height: 1rem;
		}
		.booklist .ul2 li .b1 p{
			font-size: 0.19rem;
			font-weight: 600;
			color: #333333;
			line-height: 0.19rem;
			padding-left: 0.26rem;
			
		}
		
		.booklist .ul2 li .b2 {
			font-size: 0.16rem;
			color: #999999;
			line-height: 0.4rem;
			margin-right: 0.6rem;
		}
		
		.booklist .ul2 li .b3 {
			display: block;
			width: 1.2rem;
			line-height: 0.48rem;
			font-size: 0.16rem;
			font-weight: 400;
			color: #203051;
			padding-left: 0.19rem;
			background: url(./img/a9.png) 0.95rem center no-repeat;
			border: 0.01rem solid #203051;
			cursor: pointer;
		}
		.code{
			text-align: center;
			padding: 0.3rem 0 1.6rem;
		}
		.code img{
			width: 2.6rem;
			height: 2.6rem;
			margin-bottom: 0.1rem;
		}
		.code p{
			color: #233052;
			font-size: 0.16rem;
		}
		.book_list{
			margin-top: 0.4rem;
		}
		.book_list ul{
			margin-bottom: 0.1rem;
		}
		.book_list ul li{
			border: 0.01rem solid #ddd;
			padding: 0.14rem;
			display: flex;
			align-items: center;
			cursor: pointer;
			margin-bottom: 0.3rem;
		}
		.book_list ul li img{
			width: 1.8rem;
			height: 2.4rem;
			margin-right: 0.3rem;
		}
		.book_list ul li .content{
			flex: 1;
		}
		.book_list ul li .content .title{
			font-size: 0.22rem;
			margin-bottom: 0.2rem;
			letter-spacing: 0.01rem;
			color: #333;
			font-weight: 600;
		}
		.book_list ul li .content .text{
			font-size: 0.17rem;
			letter-spacing: 0.01rem;
			margin-bottom: 0.16rem;
			color: #656565;
		}
		
		.live {
			padding: 0.06rem 0;
		}
		.live ul li {
			display: flex;
			align-items: center;
			border-bottom: 0.01rem solid #eaeaea;
			padding: 0 0 0.26rem;
			cursor: pointer;
		}
		.live ul li img{
			width: 2.6rem;
			height: 1.7rem;
			margin-right: 0.3rem;
		}
		.live ul li .content{
			flex: 1;
		}
		.live ul li .content .title{
			font-size: 0.24rem;
			margin-bottom: 0.2rem;
			letter-spacing: 0.01rem;
			line-height: 0.4rem;
		}
		.live ul li .content .summary{
			font-size: 0.14rem;
			letter-spacing: 0.01rem;
			margin-bottom: 0.22rem;
			color: #555;
		}
		.live ul li .content .source_time span{
			font-size: 0.14rem;
			letter-spacing: 0.01rem;
			color: #999;
			margin-right: 0.2rem;
		}
		
		.news .ban_list_ul ul li{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0.12rem 0;
			cursor: pointer;
		}
		.news .ban_list_ul ul li .title{
			width: 80%;
			font-size: 0.16rem;
			color: #333;
			background: url(static/icon3.png) no-repeat;
			background-size:0.22rem;
			background-position: left;
			padding-left: 0.22rem;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.news .ban_list_ul ul li .time{
			font-size: 0.16rem;
			color: #666;
		}
	</style>
</html>
